@charset 'utf-8';
@color:#ccc;
@color-a:white;
@color-b:#FF5C00;
// 第一部分
.header{
    width: 100%;
    padding: 10px 0 90px;
    border-bottom: 3px solid @color-b;
    >.center{
        >img{
           display: block;
           float: left;
           width: 48px;height: 48px;
           margin-top: 10px;
           margin-left: 15px;

        }
        >h2{
            display: block;
            float: left;
            color: #757575;
           margin-left: 15px;

        }
        >P{
            display: block;
            float: left;
            color: #757575;
            height: 20px;
            line-height: 20px;
            margin-top: 30px;
            margin-left: 15px;
        }
        >ul{
            float: right;
            margin-top: 15px;
            position: relative;

            >li{
                float: left;
                height: 40px;
                line-height: 40px;
                padding: 0 20px ;

                >a{
                    color: #757575;
                    &:hover{
                        color: @color-b;
                        text-decoration: none;
                    }
                }
            }
            >span{
                display: block;
                float: left;
                height: 40px;
                line-height: 40px;
            }
            >.head-li{
                >.h-hide{
                    display: none;
                    position: absolute;
                    top: 30px;
                    left: 0;
                    width: 126px;
                    height: 240px;
                    background-color: @color-a;
                    >ul>li{
                        list-style: none;
                        >a{
                            text-align: center;
                            display: block;
                            width: 100%;
                            height: 100%;
                            color: #757575;
                            &:hover{
                                color: @color-b;
                                text-decoration: none;
                                background-color: #ccc;
                            }
                        }
                    }
                }
                &:hover .h-hide{
                    display: block;
                }
            }
        }
    }
}
// 第二部分
.pro{
    background-color: #F5F5F5;
    padding: 38px 0;
    width: 100%;
    // height: 3000px;
    >.center{
        >table{
            width: 100%;
             background-color: @color-a;
            color: #757575;
            text-align: center;
            border-collapse: collapse;
            //* 边框合并  */
            empty-cells: show;
              //* empty-cells:show/hide;
            //无内容单元格显示、隐藏 */
            //* 文本超出显示 */
            table-layout: fixed;
            //* 让所有的单元格宽度一致 */
            // table-layout: auto;
            /* 宽度自适应 */
          
        
            }
            /* th:表格列标题（放在tr里） */
            td{
                padding: 20px 0;
                vertical-align: middle;
                /*    base-line   基线     middle  中线 */
                >input{
                    margin-right: 20px;
                    appearance: none;
                    outline: 0;
                    /* 消除以前的样式 */
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    border: 1px solid #ccc;
                }
                input::before{
                    content: "\2714";
                   color: white;
        
                }
                input:checked::before{
                    /*     checked   按钮框 点击之后的状态 */
                    background-color: @color-b;
                    color: @color-a;
                    border: none;
                    outline:none;
                    
                }
                >img{
                    display:block;
                    float: left;
                    width: 80px;
                    height: 80px;
                }
                >b{
                    display: block;
                    float: left;
                    font-weight: none;
                    line-height: 1;
                    padding-top: 35px;
                }
                >div{
                    border: 1px solid #ccc;
                    width: 140px;
                    height: 22px;
                    >input{width: 40px;
                        display: block;
                        float: left;
                        border: none;
                        appearance: none;
                         outline: 0;
                         padding-left: 20px;
                    }
                    >span{
                        display: block;
                        float: left;
                        padding: 0 12px;
                    }
                }
            }
        >.pro-a{
            margin: 20px 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: @color-a;
            >a{
                display: block;
                float: left;
                color: #757575;
                &:hover{
                    color: @color-b;
                    text-decoration: none;
                }

            }
            >b{
                display: block;
                float: left;
                font-weight: 500;
                >i{
                    color: @color-b;
                }
            }
            >span{
            
                display: block;
                float: right;
                color: @color-b;
                >i{
                    font-size: 20px;
                }
 
            }
            >.pro-b{
                display: block;
                float: right;
                width: 150px;
                height: 50px;
                text-align: center;
                display: block;
                background-color: #ccc;
                color: #757575;
                &:hover{
                    color: @color-a;
                    background-color: @color-b;
                }
            }
        }
        >.pro-c{
            padding-bottom: 50px;
            width: 100%;
                >.left{
                    padding: 0 0 40px 0;
                    float: left;
                    width: 30%;
                    height: 0;
                    border-bottom:  2px solid #c7c4c4;

                }
                >.middle{
                    float: left;
                    width: 40%;
                    line-height: 1;
                    text-align: center;
                    border: none;
                }
                >.right{
                    float: left;
                    width: 30%;
                    height: 0;
                    border-bottom: 2px solid #c7c4c4;
                    padding: 0 0 40px 0;

                }
        } 
        >.pro-d{
            width: 100%;
            margin: 30px 0;
            >ul{
                list-style: none;
                >li{
                    padding: 15px;
                    background-color: @color-a;
                    position: relative;
                    float: left;
                    width:200px;
                    margin-right: 1%;
                    margin-bottom: 1%;

                    >a{
                        display: block;
                        width: 100%;
                        &:hover{
                            text-decoration: none;
                        }
                        >img{
                            margin: 20px auto;
                            display: block;
                            width: 140px;
                            height: 140px;
                        }
                        >p{
                            color: black;
                            text-align: center;
                            >i{
                                color: @color-b;
                            }
                            >span{
                                color: #757575;
                            }
                        }
                      

                    }
                    &:hover .show-hide{
                        display: block;
                        z-index: 9;
                     }
                    >.show-hide{
                        display: none;
                        position: absolute;
                        top: 235px;
                        left: 0;
                        width: 200px;
                        background-color: @color-a;
                       
                        >a{
                            width: 100px;
                            display: block;
                            margin-left: 65px;
                            border: 1px solid @color-b;
                            color: @color-b;
                            text-align: center;
                            &:hover{
                                color: @color-a;
                                background-color: @color-b;
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }  
    }
}
// 第三部分
.footer{
    >.foo-top{
        width: 100%;
        >.center{
            >.foo-roof{
                border-bottom: 1px solid #ccc;

              >a{
                  display: inline-block;
                width:(floor(1170px/5));
                height: 80px;
                line-height: 80px;
                font-size: 16px;
                color: #616161;
                text-align: center;
                &:hover{
                    text-decoration: none;
                    color: #FF6A00;

                }
                >span{
                    font-size: 24px;
                }
            
              }
              >span{
                  color: #ccc;
                  font-size: 20px;
              }
            }
            >.foo-base{
              >ul{
                  width: 160px;
                  float: left;
                  padding: 40px 0;
                  >li:nth-child(1){
                      >h1{
                          font-size: 14px;
                          font-weight: 500;
                          margin-bottom: 26px;

                      }
                  }
                  >li{
                      >a{
                          font-size: 12px;
                          display: block;
                          line-height: 1;
                          margin: 10px 0;
                          color: #757575;
                          &:hover{
                              color: #F25807;
                              text-decoration: none;
                          }
                      }
                  }
              }
              >.foo-base-right{
                  width: 252px;
                  float: right;
                  margin-top: 60px;
                  border-left:1px solid #e0e0e0;
                  >p{
                      display: block;
                      margin: 0 0 5px;
                      text-align: center;
                  }
                  >p:nth-child(1){
                     font-size:22px;
                     line-height: 1;
                     color: #F25807;
                  }
                  >p:nth-child(2){
                      font-size: 12px;
                      color: #616161;
                  }
                  >p:nth-child(3){
                      >a{
                          display: block;
                          width: 120px;
                          height: 30px;
                          border: 1px solid #F25807;
                          line-height: 30px;
                          margin-left: 66px;
                          color: #F25807;
                          background-color: white;
                          text-align: center;
                          &:hover{
                              text-decoration: none;
                              background-color: #F25807;
                              color: white;
                          }
                      }
                  }
                  >p:nth-child(4){
                      text-align: center;
                      >a{
                        color: #616161;
                        &:hover{
                            color: #F25807;
                        }
                      }
                }
              }






            }
        }
    }

}

.footer-bottom{
    padding: 30px 0 60px 0;
    width: 100%;
    height: 265px;
    background-color: #FAFAFA;
    font-size: 12px;
    >.center{
        position: relative;
        >.foo-bot-left{
            float: left;
           >img{
               display: block;
               margin-right: 20px;
               width: 56px;
               height: 56px;
           }

        }
        >.foo-bot-right{
            float: left;
            >p{
                >p:nth-child(1){
                    >a{
                        color: #333333;
                    }
                }
                >p:nth-child(2){
                    color: #333333;

                }

                >p:nth-child(3){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(4){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(5){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(6){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                color: #757575;
                >a{
                    font-size: 12;
                    color: #757575;
                    &:hover{
                        text-decoration: none;
                        color: #F25807;
                    }
                }
            }
            >div{
                width: 100%;
                height: 19px;
                position: absolute;
                top: 200px;
                left: 0;
                text-align: center;
                color: #BFBFBF;
                font-size: 20px;
            }
            
        }
    }
}